@charset "utf-8";
$fs:64px;
html {
    font-size: $fs;
}
@function r($px) {
    @return $px/$fs*1rem;
}
//header制作
header {
    width: 100%;
    height: r(90px);
    position: fixed;
    background: #b20000;
    left: 0;
    top: 0;
    z-index: 777;
    position: fixed;
    //  搜索框制作   
    .option {
        position: absolute;
        left: r(17px);
        top: 50%;
        margin-top: -21px;
        i {
            font-size: r(42px);
            color: #fff;
        }
    }
    .logo {
        width: r(264px);
        height: r(39px);
        position: absolute;
        left: 50%;
        margin-left: r(-132px);
        img {
            width: r(264px);
        }
    }
    .h-search {
        position: absolute;
        right: r(17px);
        top: 50%;
        margin-top: -21px;
        i {
            font-size: r(42px);
            color: #fff;
            border: 1px solid;
            border-radius: 50%;
        }
    }
    //  搜索框制作 
}

//header制作
//nav制作
nav {
    position: relative;
    margin-top: r(90px);
    .nav-lb {
        width: 100%;
        height: r(358px);
        overflow: hidden;
        font-size: 0;
        >img {
            width: 100%;
        }
    }
    .text-bg {
        width: 100%;
        height: r(104px);
        background: rgba(30, 30, 30, 0.6);
        position: absolute;
        left: 0;
        bottom: 0;
        .text {
            width: r(583px);
            margin: r(24px) auto 0;
            >p:first-of-type {
                font-size: r(26.63px);
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: r(576px);
            }
            .text-bottom {
                font-size: r(17.76px);
                color: #fff;
                font-size: 0;
                margin-top: r(12px);
                span {
                    font-size: r(17.76px);
                    a {
                        font-size: r(17.76px);
                        vertical-align: middle;
                        color: #fff;
                    }
                }
                span:nth-of-type(2) {
                    margin-left: r(42px);
                }
                div:nth-of-type(2) {
                    margin-top: r(-4px);
                }
            }
            .dot {
                width: r(583px);
                text-align: center;
                i {
                    font-size: r(11px);
                }
            }
        }
    }
}
.nav-gimc{
    margin-top: 0;
}
//nav制作
//footer制作
footer{
    z-index: 777;
    height: r(96px);
    background: #f5f5f5;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 777;
    width: 100%;
    border-top: r(1px) solid #8b8b8b;
    ul{
        width: 100%;
        height: r(95px);
        li{
            float: left;
            width: 20%;
            a{
                width: 100%;
                height: r(95px);
                display: block;
                font-size: r(17.76px);
                text-align: center;
                color: #8b8b8b;
                margin-top: r(10px);
                span{
                    margin: 0 auto;
                    display: block;
                    width: r(72px);
                    height: r(48px);
                    img{
                        height: 100%;
                    }
                }
                .j{
                    margin-top: r(4px);  
                }
            }     
            .sy{
                color: #cc575b;
            }
            a:after{
                content: '';
                display: block;
                width: r(1px);
                height: r(51px);
                background: #e8e8e8;
                position: absolute;
                top: 25%;
            }
         }  
    }
}
//footer制作
//  更多
.more{
        text-align: center;
        font-size: r(22px);
        color: #bbbbbb;
        margin-top: r(20px);
        margin-bottom: r(115px);
    }
//  更多
//common搜索框
.public-search {
    height: r(90px);
    background: #1f1f1f;
    line-height: r(90px);
    position: relative;
    .s-cha {
        i {
            font-size: r(71px);
            display: block;
            color: #b60005;
        }
    }
    .input {
        position: absolute;
        top: 50%;
        left: r(88px);
        margin-top: r(-26px);
        width: r(534px);
        height: r(52px);
        border: r(1px) solid #d2d2d2;
        border-radius: r(26px);
        line-height: r(52px);
        >i {
            font-size: r(37px);
            color: #fff;
            margin-left: r(10px);
        }
        .input-text {
            width: r(450px);
            height: r(50px);
            margin-right: r(25px);
            border: none;
            background: rgba(0, 0, 0, 0);
            color: #fff;
        }
    }
}

//common搜索框
//热搜页面
.hot-search{
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    transition: all .5s;
    transform: translate3d(0,-100%,0);
    .s-key{
        width: r(583px);
        margin: r(30px) auto;
        >h1{
            font-size: r(26.63px);
            color: #211d1d;
            }
        .s-keyword{
            margin-top: r(10px);
            >div{
                height: r(56px);
                padding: 0 r(18px);
                line-height: r(56px);
                font-size: r(29.23px);
                color: #8b8b8b;
                background: #fff;
                border: r(1px) solid #e4e4e4;
                a{
                  color: #8b8b8b;  
                }
            }
            >div+div{
                margin-left: r(8px);
            }
        }
}
}
input[type="checkbox"]{
    display: none;
}
#search-page:checked+.hot-search{
    transform: translate3d(0,0,0);
    position: fixed;
    top: 0;left: 0;
    z-index: 999;
}
//热搜页面
//登录注册-未登录  
.login{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    transition: all .5s;
    transform: translate3d(-100%,0,0);
    background: #1f1f1f;
.percen{
    background: #1f1f1f;
.headportrait-wrap{
    width: r(583px);
    margin: 0 auto;
    text-align: center;
    border-top: r(1px) solid #484848;
    .headportrait{
        margin-top: r(86px);
        text-align: center;
        >img{
            width: r(129px);
            height: r(129px);
        }
    }
    >p:first-of-type{
        font-size: r(24.86px);
        a{
          color: #fff;  
        }
    }
    >p:last-of-type{
        font-size: r(19.53px);
        a{
          color: #525252; 
          text-decoration: underline; 
        }
    }
}
.classify{
    border-top: r(23px) solid #303030;
    margin-top: r(62px);
    .classify-wrap{
        width: r(583px);
        margin: r(22px) auto 0;
        color: #fff;
        .gimc{
            width: 100%;
            display: block;
            border-bottom: r(1px) solid #2c2c2c;
            cursor:pointer;
             >p{
                display: inline-block;
                font-size: r(23.08px);
                color: #fff;
                width: r(540px);
            }
            >i{
                font-size: r(23.08px);
            }
        }   
    }
}
}
}
#login-page:checked+.login{
    transform: translate3d(0,0,0);
    position: fixed;
    top: 0;left: 0;
    z-index: 999;
}
//登录注册-未登录  